<template>
	<view class="page">
		<view class="commission-summary bg-w pd30 mb20">
			<view class="summary-title">佣金总览</view>
			<view class="summary-amount">¥{{totalCommission}}</view>
			<view class="summary-stats">
				<view class="stat-item">
					<text class="value">¥{{todayCommission}}</text>
					<text class="label">今日收益</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{monthCommission}}</text>
					<text class="label">本月收益</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{pendingCommission}}</text>
					<text class="label">待结算</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-header">
				<view class="section-title">佣金明细</view>
				<view class="filter-tabs">
					<view 
						v-for="(item, index) in statusTabs" 
						:key="index"
						:class="['tab-btn', {'active': currentStatus === item.value}]"
						@click="changeStatus(item.value)"
					>
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="commission-list">
			<view v-for="(item, index) in commissionList" :key="index" class="commission-item bg-w mb20">
				<view class="commission-content">
					<view class="commission-info">
						<view class="commission-title">{{item.goods_title}}</view>
						<view class="commission-desc">{{item.order_no}}</view>
						<view class="commission-time">{{item.create_time}}</view>
					</view>
					<view class="commission-amount" :class="item.status">
						+¥{{item.amount}}
					</view>
				</view>
				<view class="commission-meta">
					<view class="meta-item">
						<text class="label">买家：</text>
						<text class="value">{{item.buyer_name}}</text>
					</view>
					<view class="meta-item">
						<text class="label">佣金比例：</text>
						<text class="value">{{item.commission_rate}}%</text>
					</view>
					<view class="meta-item">
						<text class="label">状态：</text>
						<text class="status-value" :class="item.status">{{item.status_text}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="commissionList.length === 0" class="empty-page">
			<app-icon :name="'https://picsum.photos/200/200'" type="image" custom-class="empty-image" />
			<view class="empty-text">暂无佣金记录</view>
		</view>
		
		<view class="withdraw-section bg-w pd30">
			<view class="section-title">提现管理</view>
			<view class="withdraw-info">
				<view class="info-row">
					<text class="label">可提现余额：</text>
					<text class="amount">¥{{availableBalance}}</text>
				</view>
				<view class="info-row">
					<text class="label">提现门槛：</text>
					<text class="value">¥10</text>
				</view>
			</view>
			<button class="btn-withdraw" @click="goWithdraw" :disabled="availableBalance < 10">
				{{availableBalance >= 10 ? '立即提现' : '余额不足'}}
			</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			currentStatus: '',
			statusTabs: [
				{ label: '全部', value: '' },
				{ label: '待结算', value: 'pending' },
				{ label: '已结算', value: 'settled' },
				{ label: '已失效', value: 'expired' }
			],
			totalCommission: '2,580.50',
			todayCommission: '126.80',
			monthCommission: '1,890.30',
			pendingCommission: '320.20',
			availableBalance: '2,260.30',
			commissionList: [
				{
					id: 1,
					goods_title: '豪华双人汉堡套餐',
					order_no: 'ORD202401150001',
					amount: '9.98',
					commission_rate: 25,
					buyer_name: '张先生',
					status: 'settled',
					status_text: '已结算',
					create_time: '2024-01-15 14:30'
				},
				{
					id: 2,
					goods_title: '专业SPA护理套餐',
					order_no: 'ORD202401150002',
					amount: '37.60',
					commission_rate: 20,
					buyer_name: '李女士',
					status: 'pending',
					status_text: '待结算',
					create_time: '2024-01-15 12:15'
				},
				{
					id: 3,
					goods_title: '健身房月卡',
					order_no: 'ORD202401140003',
					amount: '44.85',
					commission_rate: 15,
					buyer_name: '王先生',
					status: 'settled',
					status_text: '已结算',
					create_time: '2024-01-14 18:45'
				},
				{
					id: 4,
					goods_title: '亲子乐园套票',
					order_no: 'ORD202401140004',
					amount: '26.40',
					commission_rate: 30,
					buyer_name: '赵女士',
					status: 'expired',
					status_text: '已失效',
					create_time: '2024-01-14 16:20'
				},
				{
					id: 5,
					goods_title: '美味披萨套餐',
					order_no: 'ORD202401130005',
					amount: '8.88',
					commission_rate: 15,
					buyer_name: '刘先生',
					status: 'settled',
					status_text: '已结算',
					create_time: '2024-01-13 20:10'
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		this.loadCommissionList();
	},
	methods: {
		loadCommissionList() {
			// 实际项目中这里会调用API
		},
		
		changeStatus(status) {
			this.currentStatus = status;
			this.loadCommissionList();
		},
		
		goWithdraw() {
			if (this.availableBalance < 10) {
				uni.showToast({ 
					title: '提现金额不足10元', 
					icon: 'none' 
				});
				return;
			}
			
			uni.navigateTo({
				url: '/pages/member/money/withdraw'
			});
		}
	}
};
</script>

<style>
.commission-summary {
	text-align: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.summary-title {
	font-size: 28rpx;
	margin-bottom: 20rpx;
	opacity: 0.9;
}

.summary-amount {
	font-size: 56rpx;
	font-weight: 600;
	margin-bottom: 40rpx;
}

.summary-stats {
	display: flex;
	justify-content: space-around;
}

.summary-stats .stat-item {
	text-align: center;
}

.summary-stats .stat-item .value {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.summary-stats .stat-item .label {
	font-size: 24rpx;
	opacity: 0.9;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}

.filter-tabs {
	display: flex;
}

.tab-btn {
	padding: 8rpx 16rpx;
	margin-left: 10rpx;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #666;
	background: #f5f5f5;
}

.tab-btn.active {
	background: #007aff;
	color: white;
}

.commission-item {
	padding: 30rpx;
	border-radius: 12rpx;
}

.commission-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.commission-info {
	flex: 1;
}

.commission-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.commission-desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 8rpx;
}

.commission-time {
	font-size: 24rpx;
	color: #999;
}

.commission-amount {
	font-size: 32rpx;
	font-weight: 600;
}

.commission-amount.settled {
	color: #2ed573;
}

.commission-amount.pending {
	color: #ffa502;
}

.commission-amount.expired {
	color: #ff6b6b;
}

.commission-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.meta-item {
	font-size: 24rpx;
}

.meta-item .label {
	color: #999;
}

.meta-item .value {
	color: #333;
}

.status-value {
	color: #999;
}

.status-value.settled {
	color: #2ed573;
}

.status-value.pending {
	color: #ffa502;
}

.status-value.expired {
	color: #ff6b6b;
}

.withdraw-section {
	margin-bottom: 40rpx;
}

.withdraw-info {
	margin: 20rpx 0 30rpx 0;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.info-row .label {
	font-size: 28rpx;
	color: #666;
}

.info-row .amount {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: 600;
}

.info-row .value {
	font-size: 28rpx;
	color: #333;
}

.btn-withdraw {
	width: 100%;
	height: 80rpx;
	background: #007aff;
	color: white;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
}

.btn-withdraw[disabled] {
	background: #ccc;
}

.empty-page {
	padding: 100rpx 40rpx;
	text-align: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>